<template>

  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="handleClose"
      :close-on-click-modal="false">
      <el-form :inline="false" :model="formInline" ref="people-recharge" :rules="formRules" class="demo-form-inline"
        v-loading="loadingForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="姓名:">刘盼红</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="台餐卡号:">00326565</el-form-item>
          </el-col>
        </el-row>
		<el-row :gutter="20">
		  <el-col :span="24">
		    <el-form-item label="充值类型:" prop="title">
				  <el-radio v-model="formInline.title" label="1">充值</el-radio>
				  <el-radio v-model="formInline.title" label="2">回退</el-radio>
		    </el-form-item>
		  </el-col>
		</el-row>
		<el-row :gutter="20">
		  <el-col :span="24">
		    <el-form-item label="充值金额:" prop="title">
			  <el-input placeholder="请输入充值金额" class="cell-input" v-model="formInline.title">
				<template slot="prepend">￥</template>
			  </el-input>
		    </el-form-item>
		  </el-col>
		</el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    updataWcBanner,
    addWcBanner,
    findWcBanner,
  } from "@/api/culturalCreativity/configureBanner.js";
  let _this;
  export default {
    data() {
      return {
        title: '',
        id: null,
        dialogVisible: false,
        formRules: {
          title: {
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          },
          picUrl: {
            required: true,
            message: '请上传图片给',
            trigger: 'change'
          },
          sort: {
            required: true,
            message: '请输入排序',
            trigger: 'blure'
          },
          state: {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        },
        formInline: {},
        loadingScreen: null,
        loadingForm: false,
        fileName: '',
        btnLoading: false,
      }
    },
    methods: {
      async init(id) {
        try {
          _this = this;
          this.title = '';
          this.resetFrom();
          this.dialogVisible = true;
          if (!id) return this.title = '新增';
          this.title = '修改'
          this.loadingForm = true;
          let res = await findWcBanner(id);
          this.loadingForm = false;
          this.formInline.id = id;
          Object.keys(this.formInline).forEach(item => {
            this.formInline[item] = res.data[item];
          });
        } catch (e) {
          this.loadingForm = false;
          //TODO handle the exception
        }
      },
      resetFrom() {
        this.formInline = {
          title: "",
          picUrl: "",
          sort: "",
          state: "",
		  goodsId:""
        }
		if (this.$refs['people-recharge']) this.$refs['people-recharge'].resetFields();
      },
      handleClose() {
        this.dialogVisible = false;
      },
      handleSubmit() {
        this.$refs['people-recharge'].validate(async valid => {
          try {
            if (valid) {
              let res;
              this.btnLoading = true;
              if (!this.formInline.id) {
                res = await addWcBanner(this.formInline);
                this.$message.success("添加成功");
              } else {
                res = await updataWcBanner(this.formInline);
                this.$message.success("更新成功");
              }
              this.btnLoading = false;
              this.dialogVisible = false;
              this.$emit("success");
            }
          } catch (e) {
            this.btnLoading = false;
          }
        });
      },
    },
    created() {
      this.resetFrom();
    },
    computed: {}
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-input__inner{
  	text-align: left;
  }
  .width100 {
    width: 590px;
  }

  .cell-input {
    width: 330px;
  }

  .up-file-wrappar {
    display: flex;
    align-items: center;
  }

  .total-day {
    display: inline-block;
    height: 36px;
    width: 40px;
    margin: 0 6px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    padding: 0 15px;
    box-sizing: border-box;
  }

  .up-file-name {
    display: inline-block;
    height: 36px;
    min-width: 555px;
    text-align: left;
    line-height: 36px;
    box-sizing: border-box;
    padding: 0 15px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    color: #606266;
    font-size: inherit;

    .text {
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      -webkit-line-clamp: 1; //行数
      -webkit-box-orient: vertical;
      max-width: 555px;
    }
  }
</style>
